<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-15 12:15:11
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-11-14 17:29:04
 * @FilePath: \orderApp\packageOne\pages\foodReview\components\comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="">
    <uv-popup
      ref="popup"
      mode="bottom"
      :close-on-click-overlay="false"
      @change="change"
      custom-style="height: 85vh;"
      closeable
      round="15"
      :overlayStyle="{ 'touch-action': 'none' }"
      :overlay="false"
    >
      <view class="contain" :style="{ '--bot': bottom + 8 + 'px' }">
        <p class="title">就餐评议</p>
        <view class="wrap">
          <view>
            <p class="subtit">就餐建议</p>
            <view class="flex flex-wrap mb-1">
              <view class="advItem" v-for="(item, index) in adviceList" :key="index">
                <uv-tags
                  @click="selectHandler(item)"
                  :text="item.cont"
                  shape="circle"
                  :plain="item.isCheck"
                  :bgColor="item.isCheck ? '' : '#f3f3f4'"
                  :borderColor="item.isCheck ? '#00754A' : '#f3f3f4'"
                  :color="item.isCheck ? '#00754A' : '#595A5B'"
                ></uv-tags>
              </view>
            </view>

            <view>
              <uv-textarea
                v-model="adviceCon"
                count
                placeholder="请输入就餐评价"
                height="120"
                customStyle="{border-radios:15rpx}"
              ></uv-textarea>
            </view>

            <view class="phrasesBox">
              <p class="sub">常用语:</p>
              <view class="conBox">
                <p
                  v-for="(item, index) in comPhrases"
                  :key="index"
                  class="changyong ellipsis"
                  @click="adviceCon += item.cont"
                >
                  {{ item.cont }}
                </p>
              </view>
            </view>
          </view>
          <p class="subtit">添加图片</p>
          <cu-upload ref="uploadRef"></cu-upload>
        </view>
        <view class="bottom">
          <view class="btnBox">
            <uv-button shape="circle" color="#00754A" @click="submitAdvice" :disabled="!adviceCon">
              <span style="font-size: 31rpx">发布评价</span>
            </uv-button>
          </view>
        </view>
      </view>
    </uv-popup>
    <cu-notice ref="notice" tips="发布成功"></cu-notice>
  </view>
</template>

<script lang="ts" setup>
//
import { useUserStore } from "@/store";
import { reqCommnAdvice, reqSaveAdive } from "@/service/business/goods";
const { user } = useUserStore().userInfo;

const bottom = ref(useUserStore().pinia_SafeVal.bottom);
const emits = defineEmits<(e: "close") => void>();

const popup = ref(null);

// 常用语
const comPhrases = ref();

// 建议列表
const adviceList = ref([]);

// 选择的建议
const selectAdvice = ref([]);

const selectHandler = (val) => {
  val.isCheck = !val.isCheck;
  const idx = selectAdvice.value.findIndex((el) => el == val.cont);
  idx === -1 ? selectAdvice.value.push(val.cont) : selectAdvice.value.splice(idx, 1);

};

// 上传的图片列表
const imgList = ref([]);

// 建议内容
const adviceCon = ref("");

const open = () => {
  popup.value.open();
  getCommnAdvice(0).then((res) => {
    adviceList.value = res.map((el) => {
      el.isCheck = false;
      return el;
    });
  });
  getCommnAdvice(1).then((res) => {
    comPhrases.value = res;
  });
};

const change = (e) => {
  if (!e.show) {
    emits("close");
    adviceCon.value = ''
    selectAdvice.value = []
    uploadRef.value.imageList = []
  }
};

// 获取就餐建议和常用语
const getCommnAdvice = (sign) => {
  return new Promise((resolve, reject) => {
    reqCommnAdvice({ sign }).then((res) => {
      if (res.retCode == 2000) resolve(res.data);
    });
  });
};
const notice = ref(null)
// 发布评价
const uploadRef = ref(null);
const submitAdvice = () => {
  let picture = uploadRef.value.uploadList.join(',')
  let params = {
    picture,
    userId: user.userId,
    kitchenId: user.kitchenId,
    targ: selectAdvice.value.join(","),
    content: adviceCon.value,
  };
  // console.log(params,888)
  reqSaveAdive(params).then((res) => {
    if(res.retCode == 2000){
      notice.value.show()
      setTimeout(() => {
        popup.value.close()  
        uni.navigateBack()      
      }, 1500);     
    }
  });

};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.contain {
  height: 100%;
  position: relative;
  .title {
    font-weight: 600;
    font-size: 31rpx;
    color: #000000;
    line-height: 46rpx;
    text-align: center;
    height: 75rpx;
    line-height: 75rpx;
  }
}
//
.wrap {
  padding: 31rpx;
  height: 76%;
  overflow-y: auto;

  .subtit {
    font-weight: 600;
    font-size: 27rpx;
    color: #111111;
    // line-height: 42rpx;
    margin: 24rpx 0;
  }

  .advItem {
    margin: 8rpx 12rpx;
  }

  .phrasesBox {
    padding-bottom: 23rpx;
    border-bottom: 1rpx solid #e7e8eb;
    .sub {
      font-weight: 400;
      font-size: 23rpx;
      color: #969799;
      line-height: 42rpx;
    }

    .conBox {
      max-height: 150rpx;
      overflow: scroll;
      .changyong {
        width: 100%;
        font-weight: 400;
        font-size: 27rpx;
        color: #323233;
        line-height: 50rpx;
      }
    }
  }
}

// .imgBox {
//   // width: 154rpx;
//   // height: 154rpx;
//   // background: #f9f9f9;
//   // border-radius: 15rpx;
//   // border: 2rpx solid #dcdde1;
//   // display: flex;
//   // align-items: center;
//   // justify-content: center;
//   .txt {
//     // font-weight: 400;
//     // font-size: 23rpx;
//     // color: #595a5b;
//     // line-height: 38rpx;
//     // text-align: center;
//   }
// }

.bottom {
  width: 100%;
  background: rgba(212, 233, 226, 0.6);
  border-radius: 23rpx 23rpx 0rpx 0rpx;
  position: fixed;
  bottom: 0;
  .btnBox {
    width: 100%;
    background: #fff;
    padding: 15rpx 31rpx var(--bot) 31rpx;
    border-radius: 23rpx 23rpx 0rpx 0rpx;
    box-sizing: border-box;
  }
}
</style>
